<template>
  <div class="article-page">
    <LeftBar @article-id="articleId" :articles="articles"></LeftBar>
    <section class="content">
      <div v-html="htmlRendered"></div>
      <footer>放点啥的页脚</footer>
      <button class="edit" @click="routeToEdit(aid)">
        <span>编辑</span>
      </button>
      <button class="delete" @click="deleteArt">
        <span>删除</span>
      </button>
    </section>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, computed, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import LeftBar from "@/components/LeftBar.vue";
import { articlesTitle } from "@/types/index";
import { getArticlesTitle, getArticle, deleteArticle } from "@/api/index";
import renderMarkDown from "@/config/marked";
import { ElMessageBox } from "element-plus";

export default defineComponent({
  components: {
    LeftBar,
  },
  setup() {
    const store = useStore();
    const router = useRouter();
    const reactiveData = reactive({
      articles: [] as Array<articlesTitle>,
      content: "",
      aid: 0,
    });

    const htmlRendered = computed(() => {
      return renderMarkDown(reactiveData.content);
    });

    async function articleId(aid: number) {
      console.log(aid);
      store.commit("viewArticle", aid);
      const { code, data } = await (getArticle(aid) as any);
      if (code === 200) {
        reactiveData.content = data.article.content;
        reactiveData.aid = aid;
      }
    }
    async function getTitle() {
      if (store.state.notebookId) {
        window.localStorage.setItem(
          "notebookId",
          store.state.notebookId.toString()
        );
      }
      const { code, data } = await (getArticlesTitle(
        store.state.notebookId || window.localStorage.getItem("notebookId")
      ) as any);
      if (code === 200) {
        let articles = [];
        for (let item of data.articles) {
          articles.push({ aid: item.aid, title: item.title });
        }
        reactiveData.articles.push(...articles);
      }
    }
    function routeToEdit(aid: number) {
      store.commit("viewArticle", aid);
      store.commit("modifyArticle");
      router.push({
        name: "Edit",
      });
    }
    function deleteArt() {
      ElMessageBox.confirm("确定删除文章吗？此操作不可恢复", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { code, data } = await (deleteArticle(reactiveData.aid) as any);
          if (code === 200) {
            console.log(data.message);
            for (let i = 0; i < reactiveData.articles.length; i++) {
              if (reactiveData.articles[i].aid === reactiveData.aid) {
                reactiveData.articles.splice(i, 1);
              }
            }
            reactiveData.content = "";
          }
        })
        .catch();
    }

    getTitle();

    return {
      articleId,
      ...toRefs(reactiveData),
      routeToEdit,
      deleteArt,
      htmlRendered,
    };
  },
});
</script>
<style lang="scss" scoped>
.article-page {
  width: 100%;
  height: 100%;
}
.content {
  position: relative;
  padding: 0 20px 0 220px;
  overflow-y: scroll;
  height: 100%;
  button {
    position: fixed;
    width: 100px;
    height: 100px;
    opacity: 0;
    transition: opacity 0.1s linear;
    &:hover {
      opacity: 1;
    }
  }
  .edit {
    top: 0;
    right: 0;
    background-color: rgb(47, 77, 8);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    span {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 15px;
      color: #fff;
    }
  }
  .delete {
    bottom: 0;
    right: 0;
    background-color: rgb(150, 10, 10);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    span {
      position: absolute;
      bottom: 20px;
      right: 20px;
      font-size: 15px;
      color: #fff;
    }
  }
  footer {
    margin-top: 100px;
    width: 100%;
    height: 300px;
    text-align: center;
    color: #fff;
    font-size: 30px;
    line-height: 300px;
    background-color: rgb(61, 61, 61);
  }
}
</style>
